const div = document.querySelector('div')
const ul = document.querySelector('ul')
// div?.addEventListener('wheel', (e) => {
//     console.log();
//     if (ul) {
//         const n = ul.offsetTop
//         if (e.wheelDelta > 0) {
//             const top = n + 6;
//             ul.style.top = top + 'px'
//         } else {

//             const top = n - 6;
//             ul.style.top = top + 'px'
//         }

//     }
// })




const intersectionCallback = (entries) => {
    entries.forEach((entry) => {
        // console.log('entries',element)
        const li = entry.target
        let liDiv = li.querySelector('div')
        // 根据api返回的isIntersecting字段判断某元素是否展示
        // 如果在react或者vue中 可以将没有交叉的元素置为null，这里不做展示
        const flag = li.getAttribute('flag')
        if (flag !== 'true') {
            const cross = entry.intersectionRatio > 0 || entry.isIntersecting
            if (cross) {
                li.setAttribute('flag', 'true')
            }
            liDiv.style.display = cross ? "block" : 'none'
        }
    });
}

// 全局注册 Intersection
let intersectionObserver = new IntersectionObserver(intersectionCallback, {
    root: div, // root  根
    threshold: 1,
    rootMargin: '40px 40px 40px 40px'
});

const lis = document.querySelectorAll('li')
for (let i = 0; i < lis.length; i++) {
    const li = lis[i]
    // 开始监听
    intersectionObserver.observe(li);
}


// ++++++++错误的打开方式+++++++
// const lis = document.querySelectorAll('li')
// for (let i = 0; i < lis.length; i++) {
//     const li = lis[i]

//     let liDiv = li.querySelector('div')

//     let intersectionObserver = new IntersectionObserver((entries) => {
//         const e = entries[0]
//         const liDivCopy = liDiv?.cloneNode?.()
//         // console.log('liDivCopy', liDivCopy)
//         // 根据api返回的isIntersecting字段判断某元素是否展示
//         // 如果在react或者vue中 可以将没有交叉的元素置为null，这里不做展示
//         const flag = li.getAttribute('flag')
//         if (flag !== 'true') {
//             const cross = e.intersectionRatio > 0 || e.isIntersecting
//             if(cross) {
//                 li.setAttribute('flag', 'true')
//             }
//             liDiv.style.display = cross ? "block" : 'none'
//         }
//     }, {
//         root: div, // root  根
//         threshold: 1,
//         rootMargin: '40px 40px 40px 40px'
//     });
//     // 开始监听
//     intersectionObserver.observe(li);
// }